<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./素材/CSS/style.css">
    <link rel="icon" href="./素材/images/logoIcon.png">
    <script src="./素材/JS/jquery-3.4.1.min.js"></script>
    <script src="./素材/JS/my.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo">
             <img src="./素材/images/logo.png">
        </div>
        <div class="search">
            <div class="sinput">
                <input type="text" placeholder="我们的新时代">
                <div class="hot">
                    <img src="./素材/images/icon/hot.png">热搜榜
                </div>
                <span class="line1"></span>
                <div class="sall">
                    <img src="./素材/images/search.png">搜全网
                </div>
                <div class="list">
                    <p class="list-title">热门搜索</p>
                    <ul>
                        <li><span>1</span><span>奇葩说</span></li>
                        <li><span>2</span><span>奥特曼</span></li>
                        <li><span>3</span><span>海贼王</span></li>
                        <li><span>4</span><span>大江大河</span></li>
                        <li><span>5</span><span>流金岁月</span></li>
                        <li><span>6</span><span>潮流合伙人</span></li>
                        <li><span>7</span><span>终极笔记</span></li>
                        <li><span>8</span><span>奔跑吧兄弟</span></li>
                        <li><span>9</span><span>木鱼</span></li>
                        <li><span>10</span><span>爱情公寓 </span></li>
                    </ul>
                </div>
            </div>
            <div class="smenu">
                <div class="VIP-box">
                  <div class="menu-icon">
                    <img src="./素材/images/icon/VIP-gold.png">
                    <span>vip</span>
                  </div>
                  <div class="vip-list">
                    <div class="list-top"></div>
                    <div class="list-left">
                        <p>
                            <img src="./素材/images/gift.png">
                            <span>了解VIP会员特权</span>
                        </p>
                        <p>
                            <img src="./素材/images/diamond.png">
                            <span>领取VIP会员福利</span>
                        </p>
                        <p>
                            <img src="./素材/images/diamond.png">
                            <span>做任务领取奖励</span>
                        </p>
                        <p>
                            <img src="./素材/images/award.png">
                            <span>星钻VIP享新权益</span>
                        </p>
                    </div>
                    <div class="list-right">
                        <img src="./素材/images/code.png">
                    </div>
                    <div class="list-bottom">
                        <p>登录</p>
                    </div>
                  </div>
                </div>
                <div class="menu-icon">
                    <img src="./素材/images/icon/game-white.png">
                    <span>游戏</span>
                </div>
                <div class="menu-icon">
                    <img src="./素材/images/icon/upload-white.png">
                    <span>上传</span>
                </div>
                <div class="menu-icon">
                    <img src="./素材/images/icon/TV-white.png">
                    <span>客户端</span>
                </div>
                <div class="menu-icon">
                    <img src="./素材/images/icon/bell-white.png">
                    <span>消息</span>
                </div>
                <div class="menu-icon">
                    <img src="./素材/images/icon/clock-white.png">
                    <span>看过</span>
                </div>
            </div>
            <div class="slogin">
                <img src="./素材/images/user.png">
                <span>登录</span>
                <div class="circle"></div>
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="img-area">
            <div class="img-box">
                <img style="display: block;" src="./素材/images/bg1.jpg">
                <img src="./素材/images/bg2.jpg">
                <img src="./素材/images/bg3.jpg">
                <img src="./素材/images/bg4.jpg">
                <img src="./素材/images/bg5.jpg">
                <img src="./素材/images/bg6.jpg">
                <img src="./素材/images/bg7.jpg">
                <img src="./素材/images/bg8.jpg">
                <img src="./素材/images/bg9.jpg">
                <img src="./素材/images/bg10.jpg">
            </div>
            <div class="mask-top"></div>
            <div class="mask-bottom"></div>
            <div class="mask-right"></div>
            <div class="mask-left"></div>
            <div class="img-title">
                <div class="items select">
                    <p>建党百年</p>
                    <p>庆祝建党100周年文艺演出</p>
                </div>
                <div class="items">
                    <p>声动中国</p>
                    <p>《声动中国》建党百年特别节目</p>
                </div>
                <div class="items">
                    <p> <img src="./素材/images/VIP-flag.png">我们的新时代</p>
                    <p>青年党员的热血故事</p>
                </div>
                <div class="items">
                    <p>骑迹中国</p>
                    <p>用摩托骑迹中国的美丽乡村</p>
                </div>
                <div class="items">
                    <p><img src="./素材/images/VIP-flag.png">理想之城 </p>
                    <p>孙俪赵又廷展现职场众生相</p>
                </div>
                <div class="items">
                    <p><img src="./素材/images/VIP-flag.png">喵，请许愿 </p>
                    <p>任宥纶葛鑫怡萌甜“人喵奇缘”</p>
                </div>
                <div class="items">
                    <p><img src="./素材/images/VIP-flag.png">六个团子 </p>
                    <p>网红"耳廓狐水獭家族登场</p>
                </div>
                <div class="items">
                    <p>我们的新生活</p>
                    <p>7.23共赴新生活 一起来乐呵</p>
                </div>
                <div class="items">
                    <p>最美中轴线</p>
                    <p>孟美岐套路胡彦斌喝豆汁</p>
                </div>
                <div class="items">
                    <p>我和我们在一起</p>
                    <p>爱就是给予温暖</p>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <!-- 第一行写导航栏 -->
        <div class="movies">
            <div class="msg">
                <div class="msg-box">
                    <p>电影</p>
                    <span>MOVIES</span>
                    <p>热播大片</p>
                    <p>全部电影</p>
                </div>
                <div class="msg-box">
                    <p>电视剧</p>
                    <span>TVSHOWS</span>
                    <p>迷雾剧场</p>
                    <p>爱青春</p>
                </div>
                <div class="msg-box">
                    <p>综艺</p>
                    <span>VARIETY SHOWS</span>
                    <p>王牌自制</p>
                    <p>最近热播</p>
                </div>
                <div class="msg-box">
                    <p>动漫</p>
                    <span>ANIME</span>
                    <p>最新国漫</p>
                    <p>新番上线</p>
                </div>
                <div class="msg-box">
                    <p>儿童</p>
                    <span>CHILDREN</span>
                    <p>热播动画</p>
                    <p>最新动画</p>
                </div>
                <div class="msg-box">
                    <p>纪录片</p>
                    <span>DOCUMENTARIES</span>
                    <p>热播剧场</p>
                    <p>探索世界</p>
                </div>    
            </div>
            <div class="line"></div>
            <div class="hot-news">
                <div class="news-item">
                    <p>热点</p>
                    <p>纪录片</p>
                    <p>知识</p>
                </div>
                <div class="news-item">
                    <p>资讯</p>
                    <p>新片</p>
                    <p>财经</p>
                </div>
            </div>
            <div class="line"></div>
            <div class="VIP">
                <p>会员精选</p>
                <p>直播中心</p>
                <div class="more">
                    <p>更多 <img src="./素材/images/more.png"></p>
                    <div class="morelist">
                        <table>
                            <tr>
                                <td>资讯</td>
                                <td>军事</td>
                                <td>音乐</td>
                                <td>漫画</td>
                                <td>旅游</td>
                                <td>教育</td>
                            </tr>
                            <tr>
                                <td>财经</td>
                                <td>母婴</td>
                                <td>小说</td>
                                <td>原创</td>
                                <td>汽车</td>
                                <td>健康</td>
                            </tr>
                            <tr>
                                <td>搞笑</td>
                                <td>生活</td>
                                <td>商城</td>
                                <td>科技</td>
                                <td>教育</td>
                                <td>时尚</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二行 写图片廊 -->
        <div class="pic">
            <div>
                <img src="./素材/images/mini1.jpg">
                <p>三分钟回顾建党百年征程</p>
            </div>
            <div>
                <img src="./素材/images/mini2.jpg">
                <p>2020欧洲杯142粒全进球</p>
            </div>
            <div>
                <img src="./素材/images/mini3.jpg">
                <p>百年巨匠——中华教育史的丰碑</p>
            </div>
            <div>
                <img src="./素材/images/mini4.jpg">
                <p>过去与现在超能力大战</p>
            </div>
            <div>
                <img src="./素材/images/mini5.jpg">
                <p>杨超越球场连续打伤张彬彬</p>
            </div>
        </div>
    </div>
</body>
</html>